<template>
 <view class="header" :style="{paddingTop: safeAreaInsets?.top + 'px'}">
   <view>
    <text class="title">小洁店铺</text> 
    <text style="color: #fff;"> | </text>
    <text style="color: #fff;">新鲜 · 利明 · 快捷</text>
   </view>
   <view class="search">
    <text class="iconfont icon-sousuo1" ></text>
    <input type="text" class="search-input" placeholder="搜索商品、商家" style="color: #fff; " placeholder-style="color: #fff;" />
    <text class="iconfont icon-iconfontscan" @tap="goSaoma()"></text>
   </view>
 </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
const {safeAreaInsets} = uni.getSystemInfoSync()
const goSaoma = () => {
  uni.scanCode({
	success: function (res) {
		console.log('条码类型：' + res.scanType);
		console.log('条码内容：' + res.result);
	}
});
}
</script>

<style scoped lang="scss">
.header{
  width: 100%;
  height: 200rpx;
  background-color: #22d3ee;
}
.title{
  margin-left: 40rpx;
  font-size: 40rpx;
  color: white;
}
.search{
  border: solid 1px #ffffff;
  width: 90%;
  height: 50rpx;
  margin:40rpx auto;
  border-radius: 50rpx;
  display: flex;
  justify-content: space-around;
}
.iconfont{
  font-size: 30rpx;
  color: white;
  line-height: 50rpx;
}

.search-input{
  width: 80%;
}

</style>